<template>
  <fullScreenContainer
    :leftList="leftList"
    bgSelect="bg3"
    type="fullScreenContainer"
    title="湖南省优势特色产业集群可视化分析"
  >
    <template slot="leftContent" >
      <Panel key="jdfj" title="集群运行KPI展示" height="100%">
        <div class="jdfj">
          <div class="jdfj-tabs1">
            <tabs1 v-model="tabs1_valuea" @change="changa"></tabs1>
          </div>
          <div class="jdfj-tabs2">
            <tabs2
              v-model="tabs2_valuea"
              :tabs="qjzs_tabs"
              @change="barchangea"
            ></tabs2>
          </div>
          <div class="jdfj-bars">
            <echartDemo
              key="a"
              title="万亩"
              :initData="sxbars1"
              :initChart="barsChart"
            ></echartDemo>
          </div>
        </div>

        <div class="jdfj">
          <div class="jdfj-tabs1">
            <tabs1 v-model="tabs1_valueb" :tabs="ppjs_tabs_one" @change="changb"></tabs1>
          </div>
          <div class="jdfj-tabs2">
            <tabs2 v-model="tabs2_valueb" :tabs="ppjs_tabs_two" @change="barchangeb"></tabs2>
          </div>
          <div class="jdfj-circle1">
            <div v-for="item in ppjs" class="circle-box-mb">
              <circle1 :number="parseInt(item.wczNum)" circleText="完成"></circle1>
              <div class="circle-box-year">
                <span>{{item.year}}</span>
              </div>
              <div class="circle-total">
                <span class="circle-total-text">目标</span>
                <span class="circle-total-number">
                  {{ numberFormat(item.mbzNum) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="jdfj jdfj-top">
          <div class="jdfj-tabs1">
            <tabs1 v-model="tabs1_valuec" :tabs="jyjy_tabs_one" @change="changc"></tabs1>
          </div>
          <div class="jdfj-tabs2">
            <tabs2 v-model="tabs2_valuec" :tabs="jyjy_tabs_two" @change="barchangec"></tabs2>
          </div>
          <div class="jdfj-sx">
            <echartDemo
              key="b"
              :initData="sxbars"
              :initChart="barsChart"
            ></echartDemo>
          </div>
        </div>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="jdfj" title="综合展示" height="100%">
        <div class="jdfj">
          <div class="jdfj-tabs1">
            <tabs1
              v-model="tabs1_value"
              :tabs="[{ name: '分析型驾驶舱展示', value: '1' }]"
            ></tabs1>
          </div>
          <div class="jdfj-tabs2">
            <tabs2 v-model="tabs4_value" :tabs="tabs4" @change="barchanged"></tabs2>
          </div>
          <div class="jdfj-bars" v-if="tabs4_value == '1' || tabs4_value == '2'">
            <echartDemo
              key="a"
              :initData="sxbars2"
              :initChart="barsChart"
            ></echartDemo>
          </div>
          <div class="table1-box" v-if="tabs4_value == '3'">
            <scroll
              rowStyle="content_tr_center"
              :runSpeed="22"
              :scrollContentHeight="144"
              :columnsConfg="learDataColumnsConfg1"
              :rowdata="rowdata1"
            >
            </scroll>
          </div>
        </div>

        <div class="jdfj">
          <div class="jdfj-tabs1">
            <tabs1
              v-model="tabs1_value"
              :tabs="[{ name: '指挥运营中心综合展示', value: '1' }]"
            ></tabs1>
          </div>
          <div class="jdfj-card">
            <card></card>
            <card></card>
          </div>
          <div class="table1-box">
            <scroll
              rowStyle="content_tr_center"
              :runSpeed="22"
              :scrollContentHeight="300"
              :columnsConfg="learDataColumnsConfg"
              :rowdata="rowdata"
            >
              <!-- <template slot="name" slot-scope="{ data }">
                <span @click="text(data)">

                </span>
              </template> -->
            </scroll>
          </div>
        </div>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Panel key="jdfj-center" title="运营情况及异常预警展示" height="100%">
          <div class="jdfj-center-tabs1">
            <tabs1 key="center-tabs" v-model="tabs3_value" :tabs="tabs"></tabs1>
          </div>
          <div style="display: flex;" class="jdfj-center">
            <div class="bg-box-1" v-for="item,index in yyqkzs">
              <div class="bg-box-1-icon">
                <img :src="yyqk[index]" alt="" srcset="">
              </div>
              <div class="bg-box-1-number" style="align-items: center;">
                <span class="color">{{ item.num }}</span>
                <span class="unit">个</span>
              </div>
              <div class="bg-box-1-text">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="jdfj-center-tabs1">
            <tabs1
              key="center-tabs"
              v-model="tabs3_value"
              :tabs="tabs1"
            ></tabs1>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <div class="jdfl-center-circle">
              <echartDemo :initChart="hxChart" :initData="sxbars_hx[0]"></echartDemo>
            </div>
            <div class="jdfl-center-circle">
              <echartDemo :initChart="hxChart" :initData="sxbars_hx[1]"></echartDemo>
            </div>
            <div class="jdfl-center-circle">
              <echartDemo :initChart="hxChart" :initData="sxbars_hx[2]"></echartDemo>
            </div>
          </div>

          <div class="jdfj-center-tabs1">
            <tabs1
              key="center-tabs"
              v-model="tabs3_value"
              :tabs="tabs2"
            ></tabs1>
          </div>
          <div style="display: flex;">
            <box1 class="jdfl-center-btm" name="龙头企业数" :number="Jscqyztqk"></box1>
            <div class="jdfl-center-circle">
              <echartDemo :initChart="pieChart" :initData="sxbars_pie"></echartDemo>
            </div>
          </div>
        </Panel>
        <!-- <Map ref="Map"></Map> -->
      </div>
    </template>
    <!-- <template slot="centerContent">
      <map-tools></map-tools>
    </template> -->
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import line from './line/initChart'
import barsline from './barsline'
import barsChart from './barsChart'
import echartDemo from '@/echartsDemo/index.vue'
import tabs1 from '../templateBigScreen/tabs1.vue'
import tabs2 from '../templateBigScreen/tabs2.vue'
import circle1 from '../templateBigScreen/circle.vue'
import sxbarChart from '../templateBigScreen/sxbarChart'
import jgnl from "./images/jgnl.png";
import ppjs from "./images/ppjs.png";
import ymjd from "./images/ymjd.png";
import box1 from './box1.vue'
import pieChart from '../templateBigScreen/pieChart'
import hxChart from '../templateBigScreen/hxChart'
import card from './card.vue'
import scroll from '../templateBigScreen/scroll.vue'
export default {
  components: {
    Map,
    MapTools,
    echartDemo,
    tabs1,
    tabs2,
    circle1,
    box1,
    card,
    scroll,
  },
  data() {
    return {
      //  驾驶舱后台数据
      jsc:null,
      yyqk:[ymjd,jgnl,ppjs],
      ppjs:[],
      sxbars1Xdata:[],
      sxbars1Ydata1:[],
      sxbars1Ydata2:[],
      title1:null,
      circle1Mbz:null,
      circle1Wcz:null,
      circle2Mbz:null,
      circle2Wcz:null,
      circle3Mbz:null,
      circle3Wcz:null,
      sxbars1: {
        title: '万亩',
        data: [
          {
            type: 'bar',
            barWidth: 15,
            data: [117.4, 118.9, 120.4],
          }
        ],
        xAxisData:['2021','2022','2024']
      },
      sxbars2: {
        title: '万亩',
        data: [
          {
            type: 'bar',
            barWidth: 15,
            data: [117.4, 118.9, 120.4],
          },
        ],
      },
      sxbars: {
        title: '个',
        data: [
          {
            type: 'bar',
            barWidth: 15,
            data: [1548, 1654, 1625],
          }
        ],
        xAxisData:['2021','2022','2023']
      },
      sxbars_hx:[],
      sxbars_pie:{
        legendData:['企业'],
        name:"企业",
        seriesData:[
          { value: 1, name: '企业' },
        ]
      },
      leftList: [],
      layerType:null,
      line,
      barsline,
      barsChart,
      sxbarChart,
      pieChart,
      hxChart,
      tabs1_valuea: '1',
      tabs1_valueb:'1',
      tabs1_valuec:'1',
      tabs2_valuea: '1',
      tabs2_valueb: '1',
      tabs2_valuec: '1',

      tabs1_value: '1',
      tabs2_valuea: '1',
      tabs3_value: '2',
      tabs4_value: '1',
      tabs: [
        {
          name: '运营情况展示',
          value: '2',
        },
      ],
      tabs1: [
        {
          name: '产业群资金投入情况',
          value: '2',
        },
      ],
      tabs2: [
        {
          name: '企业总体情况',
          value: '3',
        },
      ],
      learDataColumnsConfg: [
        {
          label: '告警时间',
          prop: 'name',
          width: '35%',
          paddingLeft: '0px',
        },
        {
          label: '告警类型',
          prop: 'class',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '告警状态',
          prop: 'content',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '操作',
          prop: 'datetiem',
          width: '20%',
          paddingLeft: '0px',
        },
      ],
      learDataColumnsConfg1: [
        {
          label: '产品名称',
          prop: 'name',
          width: '40%',
          paddingLeft: '0px',
        },
        {
          label: '价格',
          prop: 'class',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '日期',
          prop: 'content',
          width: '40%',
          paddingLeft: '0px',
        }
      ],
      rowdata: [],
      rowdata1: [],
      qjzs_tabs: [
        {
          name: '种植面积',
          value: '1',
        },
        {
          name: '产量',
          value: '2',
        },
        {
          name: '产值',
          value: '3',
        },
        {
          name: '加工转化率',
          value: '4',
        },
      ],

      ppjs_tabs_one: [
        {
          name: '品牌建设',
          value: '1',
        },
        {
          name: '绿色发展',
          value: '2',
        },
      ],
      ppjs_tabs_two:[],
      tabs1_valueb1: '1',
      jyjy_tabs_one: [
        {
          name: '集约经营',
          value: '1',
        }
      ],
      jyjy_tabs_two: [
          {
            name: '龙头企业',
            value: '1',
          },
          {
            name: '家庭农场',
            value: '2',
          },
          {
            name: '合作社',
            value: '3',
          }
        ],
      tabs1_valuec1: '1',
      tabs1_valuec2: [],
      tabs4:[
          {
            name: '面积',
            value: '1',
          },
          {
            name: '产量',
            value: '2',
          },
          {
            name: '价格',
            value: '3',
          }
      ],
      yyqkzs:[],
      Jscqyztqk:0,
    }
  },
  methods: {
    text(data) {
      console.log(data, 'sss')
    },
    barchangea(value) {
      this.sxbars1Ydata1 = [];
      this.sxbars1Ydata2 = [];
      this.sxbars1Xdata = [];

      var oneNmae= "";
      var twoNmae= "";
      // 增值保供
      if (this.tabs1_valuea == '1') {
        if (value == '1') {//种植面积
          oneNmae = "增值保供";
          twoNmae = "种植面积";
          this.title = '万亩'
        }
        if (value == '2') {//产量
          oneNmae = "增值保供";
          twoNmae = "产量";
          this.title = '万吨'
        }
        if (value == '3') {//产值
          oneNmae = "增值保供";
          twoNmae = "产值";
          this.title = '亿元'
        }
        if (value == '4') {//加工转化率
          oneNmae = "增值保供";
          twoNmae = "加工转化率";
          this.title = '%'
        }
      }
      // 科技创新
      if (this.tabs1_valuea == '2') {
        if (value == '1') {//机械化率
          oneNmae = "科技创新";
          twoNmae = "机械化率";
          this.title = '%';
        }
        if (value == '2') {//技术人员
          oneNmae = "科技创新";
          twoNmae = "技术人员";
          this.title = '个';
        }
        if (value == '3') {//研发平台
          oneNmae = "科技创新";
          twoNmae = "研发平台";
          this.title = '个';
        }
      }

      for(let i=0;i< this.jsc.bigScreenJsczhzs.length;i++){
            if(this.jsc.bigScreenJsczhzs[i].tableOne == oneNmae && this.jsc.bigScreenJsczhzs[i].tableTwo == twoNmae){
              this.sxbars1Ydata1.push(parseInt(this.jsc.bigScreenJsczhzs[i].mbzNum));
              this.sxbars1Ydata2.push(parseInt(this.jsc.bigScreenJsczhzs[i].wczNum));
              this.sxbars1Xdata.push(this.jsc.bigScreenJsczhzs[i].year);
            }
          }
          this.sxbars1.title = this.title;
          this.sxbars1.data = [
            {
              name: '目标值',
              type: 'bar',
              barWidth: 15,
              data: this.sxbars1Ydata1,
            },
            {
              name: '完成值',
              type: 'bar',
              barWidth: 15,
              data: this.sxbars1Ydata2,
            },
          ],
          this.sxbars1.xAxisData = this.sxbars1Xdata;
    },

    barchangeb(value){
      this.ppjs = [];
      var oneNmae= "";
      var twoNmae= "";
      // 品牌建设
      if (this.tabs1_valueb == '1') {
        if (value == '1') {//省级品牌
          oneNmae = "品牌建设";
          twoNmae = "省级品牌";
          this.title = ''
        }
        if (value == '2') {//县级品牌
          oneNmae = "品牌建设";
          twoNmae = "县级品牌";
          this.title = ''
        }
        if (value == '3') {//产品品牌
          oneNmae = "品牌建设";
          twoNmae = "产品品牌";
          this.title = ''
        }
      }
      // 绿色发展
      if (this.tabs1_valueb == '2') {
        if (value == '1') {//两品一标数量
          oneNmae = "绿色发展";
          twoNmae = "两品一标数量";
        }
        if (value == '2') {//两品一标产量
          oneNmae = "绿色发展";
          twoNmae = "两品一标产量";
        }
      }

      for(let i=0;i< this.jsc.bigScreenJsczhzs.length;i++){
            if(this.jsc.bigScreenJsczhzs[i].tableOne == oneNmae && this.jsc.bigScreenJsczhzs[i].tableTwo == twoNmae){
              this.ppjs.push(this.jsc.bigScreenJsczhzs[i]);
            }
          }
    },

      barchangec(value) {
      this.sxbars1Ydata1 = [];
      this.sxbars1Ydata2 = [];
      this.sxbars1Xdata = [];

      var oneNmae= "";
      var twoNmae= "";
      // 集约经营
      if (this.tabs1_valuec == '1') {
        if (value == '1') {//龙头企业
          oneNmae = "集约经营";
          twoNmae = "龙头企业";
          this.title = '个'
        }
        if (value == '2') {//家庭农场
          oneNmae = "集约经营";
          twoNmae = "家庭农场";
          this.title = '个'
        }
        if (value == '3') {//合作社
          oneNmae = "集约经营";
          twoNmae = "合作社";
          this.title = '个'
        }
      }

      for(let i=0;i< this.jsc.bigScreenJsczhzs.length;i++){
            if(this.jsc.bigScreenJsczhzs[i].tableOne == oneNmae && this.jsc.bigScreenJsczhzs[i].tableTwo == twoNmae){
              this.sxbars1Ydata1.push(parseInt(this.jsc.bigScreenJsczhzs[i].mbzNum));
              this.sxbars1Ydata2.push(parseInt(this.jsc.bigScreenJsczhzs[i].wczNum));
              this.sxbars1Xdata.push(this.jsc.bigScreenJsczhzs[i].year);
            }
          }
          this.sxbars.title = this.title;
          this.sxbars.data = [
            {
              name: '目标值',
              type: 'bar',
              barWidth: 15,
              data: this.sxbars1Ydata1,
            },
            {
              name: '完成值',
              type: 'bar',
              barWidth: 15,
              data: this.sxbars1Ydata2,
            },
          ],
          this.sxbars.xAxisData = this.sxbars1Xdata;
    },

    barchanged(value) {
      this.sxbars1Ydata1 = [];
      this.sxbars1Ydata2 = [];
      this.sxbars1Xdata = [];

      var oneNmae= "";
      var twoNmae= "";
      // 分析性驾驶舱展示
      if (value == '1') {//面积
        oneNmae = "面积";
        this.title = '万亩'
      }
      if (value == '2') {//产量
        oneNmae = "产量";
        this.title = '万吨'
      }
      if (value == '3') {//价格
        twoNmae = "价格";
        this.title = '价格/斤'
      }

      for(let i=0;i< this.jsc.bigScreenJscfxxzs.length;i++){
            if(this.jsc.bigScreenJscfxxzs[i].label == oneNmae){
              this.sxbars1Ydata1.push(this.jsc.bigScreenJscfxxzs[i].ztArea);
              this.sxbars1Ydata2.push(this.jsc.bigScreenJscfxxzs[i].xmqArea);
              this.sxbars1Xdata.push(this.jsc.bigScreenJscfxxzs[i].year);
            }
            if(this.jsc.bigScreenJscfxxzs[i].label == twoNmae){
                this.rowdata1.push({
                name: this.jsc.bigScreenJscfxxzs[i].cyName,
                class: this.jsc.bigScreenJscfxxzs[i].cyPrice,
                content: this.jsc.bigScreenJscfxxzs[i].year,
              });
            }
          }
          this.sxbars2.title = this.title;
          this.sxbars2.data = [
            {
              name: '总体',
              type: 'bar',
              barWidth: 15,
              data: this.sxbars1Ydata1,
            },
            {
              name: '项目区',
              type: 'bar',
              barWidth: 15,
              data: this.sxbars1Ydata2,
            },
          ],
          this.sxbars2.xAxisData = this.sxbars1Xdata;
    },

    changa(value) {
      if (value == '1') {
        this.qjzs_tabs = [
          {
            name: '种植面积',
            value: '1',
          },
          {
            name: '产量',
            value: '2',
          },
          {
            name: '产值',
            value: '3',
          },
          {
            name: '加工转化率',
            value: '4',
          },
        ]
      }
      if (value == '2') {
        this.qjzs_tabs = [
          {
            name: '机械化率',
            value: '1',
          },
          {
            name: '技术人员',
            value: '2',
          },
          {
            name: '研发平台',
            value: '3',
          },
        ]
      }
      this.tabs2_valuea = '1'
      this.barchangea(this.tabs2_valuea)
    },

    changb(value) {
      if (value == '1') {
        this.ppjs_tabs_two = [
          {
            name: '省级品牌',
            value: '1',
          },
          {
            name: '县级品牌',
            value: '2',
          },
          {
            name: '产品品牌',
            value: '3',
          }
        ]
      }
      if (value == '2') {
        this.ppjs_tabs_two = [
          {
            name: '两品一标数量',
            value: '1',
          },
          {
            name: '两品一标产量',
            value: '2',
          }
        ]
      }
      this.tabs2_valueb = '1'
      this.barchangeb(this.tabs2_valueb)
    },

    changc(value) {
     this.tabs2_valuec = '1';
     this.barchangec(this.tabs2_valuec);
    },

    // 获取驾驶舱数据
    getJsc() {
      var ss = this.$api.bigScreenIndex.getJsc(this.layerType);
      ss.then((res) => {
        this.jsc = res.data;
        this.yyqkzs = res.data.bigScreenJscyyqk;
        this.barchangea('1');
        this.barchangeb('1');
        this.barchangec('1');
        this.barchanged('1');

        //驾驶舱-指挥运营中心综合展示
        for(let i=0;i< res.data.bigScreenJsczhyxzxzs.length;i++){
           this.rowdata.push({
            name:res.data.bigScreenJsczhyxzxzs[i].warningTime,
            class: res.data.bigScreenJsczhyxzxzs[i].warningType,
            content: res.data.bigScreenJsczhyxzxzs[i].warningState,
            datetiem: res.data.bigScreenJsczhyxzxzs[i].warningCaozuo,
           });
        }

        //驾驶舱-产业群资金投入情况
        for(let i=0;i< res.data.bigScreenJsccyqzjtr.length;i++){
           this.sxbars_hx.push({
             unit:'万元',
            getname:['中央资金', '地方配套资金', '自筹资金'],
            getvalue:[res.data.bigScreenJsccyqzjtr[i].zyFund, res.data.bigScreenJsccyqzjtr[i].dfFund, res.data.bigScreenJsccyqzjtr[i].cyFund],
            title:res.data.bigScreenJsccyqzjtr[i].name,
            number:parseInt(res.data.bigScreenJsccyqzjtr[i].zyFund) + parseInt(res.data.bigScreenJsccyqzjtr[i].dfFund) + parseInt(res.data.bigScreenJsccyqzjtr[i].cyFund)
          });
        }

        //驾驶舱-企业总体情况
        this.sxbars_pie.name = '企业数';
        this.sxbars_pie.legendData = [];
        this.sxbars_pie.seriesData = [];
        for(let i=0;i< res.data.bigScreenJscqyztqk.length;i++){
           this.Jscqyztqk = this.Jscqyztqk + parseInt(res.data.bigScreenJscqyztqk[i].num);
           this.sxbars_pie.legendData.push(res.data.bigScreenJscqyztqk[i].name);
           this.sxbars_pie.seriesData.push({ value: parseInt(res.data.bigScreenJscqyztqk[i].num), name: res.data.bigScreenJscqyztqk[i].name });
        }

      });
    },
  },
  mounted() {
    this.barchangea(this.tabs2_value)
    this.barchangec('1');
  },
  created() {
    this.layerType = this.$route.query.layerType ? this.$route.query.layerType : '0';
    this.leftList = [
      { name: '数据看板', key: '/bigScreen1?layerType=' + this.layerType },
      {
        name: '驾驶舱', key: '/bigScreen1/jiashicang?layerType=' + this.layerType,
      },
      { name: '挂图作战检测', key: '/bigScreen1/guatuzz?layerType=' + this.layerType },
    ]
    this.getJsc();
    this.changb('1');
  },
}
</script>
<style scoped lang="scss">
.num,
.zb {
  color: #fff;
}
.table1-box {
  width: 445px;
}
.jdfj-center,
.jdfj-center-tabs1 {
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
.jdfj-tabs2 {
  margin-top: 20px;
}
.jdfj-bars {
  margin-top: 20px;
  height: 180px;
}
.jdfj-sx {
  height: 200px;
}
.jdfj-circle1 {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.jdfj-top {
  position: relative;
  top: 60px;
}
.circle-box-mb {
  width: 100px;
  height: 100px;
  .circle-box-year {
    height: 20px;
    margin-top: 16px;
    text-align: center;
  }
  .circle-box-year span {
    opacity: 1;
    /* 图表中文 */
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: 350;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0em;

    /* 文字白 */
    color: #ffffff;

    z-index: 0;
  }
  .circle-total {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
    justify-content: center;
    .circle-total-text {
      font-family: Source Han Sans;
      font-weight: 400;
      font-size: 12px;
      font-variation-settings: 'opsz' auto;
      color: #d0fff2;
    }
    .circle-total-number {
      font-family: DIN;
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      letter-spacing: 0em;

      background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      z-index: 0;
    }
  }
}
.map-page-container {
  width: 866px !important;
  height: 960px !important;
  border-radius: 5px;
  opacity: 1;
  //   border: 1px solid red;
  /* 自动布局 */
  display: flex;
  flex-direction: column;
  // padding: 20px 20px !important;
  // gap: 30px;
  flex-grow: 1;

  /* 背景渐变1 */
  background: linear-gradient(
    180deg,
    rgba(17, 77, 71, 0.3) 0%,
    rgba(22, 53, 50, 0.3) 100%
  );

  z-index: 1;
  left: 0px;
  right: 2px;
  bottom: 25px;
  margin: auto;
}
.jdfj {
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
.jdfl {
  align-items: center;
  .right {
    // display: flex;
    // flex-direction: column;
    // gap: 20px;
    margin-top: 15px;
    .bottom {
      margin-top: 20px;
    }
  }
}
.jdfl-two {
  margin-top: 30px;
}
.jdfl-center-circle {
  height: 300px;
  width: 80%;
}
.jdfl-center-btm {
  margin-top: 30px;
}
.jdfj-card {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
</style>
